<template>
  <el-card class="custom-card">
    <!-- 卡片顶部区域 -->
    <div class="flex flex-col">

      <!-- 大标题 -->
      <h1 class="contact-title">
        菌株选育
      </h1>

      <div class="custom-double-divider">
        <el-divider class="title-divider" />
      </div>

      <!-- 服务介绍内容 -->
      <div class="section">
        <div class="platform-content">
          <p class="content-paragraph">
            药用微生物资源创新与转化研究平台可开展优势菌株选育工作，采用紫外诱变选育、自然选育、分子标记选育等多种选育手段，对药用植物优质伴生菌、优质药用真菌菌株等菌株进行高效选育。具体服务涵盖：
          </p>
          <div class="service-list">
            <p class="service-item">（1）菌种改良：通过紫外诱变与筛选获得优势菌株；</p>
            <p class="service-item">（2）功能菌种选育：针对目标功能，对收集到的菌株进行功能验证与对比，自然选育出优势菌株；</p>
            <p class="service-item">（3）分子标记选育：依照已开发出的优势菌株分子标记，采用分子鉴定的方法进行优势菌株选育。</p>
          </div>
          <p class="content-paragraph">
            依托专业团队与标准化流程，加速菌种研发进程，助力优质中药材生产。
          </p>
        </div>
      </div>

      <!-- 参考文献 -->
      <div class="service-section">
        <h2 class="section-title">参考文献</h2>
        <div class="reference-content">
          <p class="reference-text">[1]程瑞,刘天睿,李仰华,等.一株适合红天麻伴栽的蜜环菌菌株筛选[J].中国中药杂志,2023,48(02):374-381.</p>
          <p class="reference-text">[2]梁宇庭,蒋超,周骏辉,等.高卢蜜环菌PCR-RFLP快速鉴别方法研究[J].中国中药杂志,2019,44(17):3622-3626.</p>
        </div>
      </div>

      <!-- 服务流程 -->
      <div class="service-section">
        <h2 class="section-title">一、服务流程</h2>
        <div class="process-content">
          <p class="process-text">
            委托单位提交材料→委托单位邮寄材料至本平台→本平台进行选育并向委托单位发送缴费通知→本平台出具菌株选育报告
          </p>
        </div>
      </div>

      <!-- 服务类型 -->
      <div class="service-section">
        <h2 class="section-title">二、服务类型</h2>
        <div class="type-content">
          <p class="type-text">
            全流程选育和单项试验。
          </p>
        </div>
      </div>

      <!-- 联系方式 -->
      <div class="service-section">
        <h2 class="section-title">三、联系方式</h2>
        <div class="contact-content">
          <p class="contact-text">联系电话：18870822971 刘老师</p>
          <p class="contact-text">邮箱：liutianrui2022@itcmhi.ac.cn</p>
        </div>
      </div>

      <!-- 邮寄地址 -->
      <div class="service-section">
        <h2 class="section-title">四、邮寄地址</h2>
        <div class="address-content">
          <p class="address-text">单位名称：中国中医科学院中医药健康产业研究所</p>
          <p class="address-text">详细地址：江西省南昌市新建区新祺周管理处中医药科创城公共服务中心3号楼</p>
          <p class="address-text">邮政编码：330115</p>
          <p class="address-text">收货人：刘天睿</p>
          <p class="address-text">手机号：18870822971</p>
        </div>
      </div>

      <!-- 汇款方式 -->
      <div class="service-section">
        <h2 class="section-title">五、汇款方式</h2>
        <div class="payment-content">
          <p class="payment-text">银行汇款</p>
          <p class="payment-text">名称：中国中医科学院中医药健康产业研究所</p>
          <p class="payment-text">银行账号：1502007809000067701</p>
          <p class="payment-text">开户银行：中国工商银行股份有限公司江西赣江新区分行</p>
          <p class="payment-text payment-note">
            汇款时请注明开发票抬头信息。请于汇款操作完成后，邮件通知本平台（附有汇款单据），以便我们确认汇款信息。
          </p>
        </div>
      </div>

    </div>
  </el-card>
</template>

<script setup>
import { ref } from 'vue'
</script>

<style scoped>
/* 自定义卡片样式 */
.custom-card {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  transition: all 0.3s ease;
  max-width: 900px;
  margin: 0 auto;
}

.custom-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* 标题样式 */
.contact-title {
  font-size: 35px;
  font-weight: bold;
  color: #333;
  text-align: start;
  margin-bottom: 2rem;
}

/* 内容区域样式 */
.platform-content {
  line-height: 1.8;
  color: #555;
  margin-bottom: 2rem;
}

.content-paragraph {
  margin-bottom: 1.5rem;
  text-align: left;
  text-indent: 2em;
}

/* 服务列表样式 */
.service-list {
  margin: 1.5rem 0;
  padding-left: 2em;
}

.service-item {
  line-height: 1.6;
  color: #555;
  margin-bottom: 0.8rem;
  text-align: left;
  font-size: 1.05rem;
}

.service-item:last-child {
  margin-bottom: 0;
}

/* 参考文献样式 */
.reference-content {
  padding: 0 1rem;
}

.reference-text {
  line-height: 1.6;
  color: #555;
  margin-bottom: 0.8rem;
  text-align: left;
  font-size: 1.05rem;
}

.reference-text:last-child {
  margin-bottom: 0;
}

/* 服务部分样式 */
.service-section {
  margin-bottom: 2.5rem;
}

.section-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #13675b;
  margin-bottom: 1rem;
  text-align: start;
}

/* 流程内容样式 */
.process-content {
  background-color: #f8f9fa;
  padding: 1.5rem;
  border-radius: 8px;
  border-left: 4px solid #13675b;
}

.process-text {
  line-height: 1.6;
  color: #555;
  margin: 0;
  font-size: 1.05rem;
  text-align: left;
}

/* 类型内容样式 */
.type-content {
  padding: 0 1rem;
}

.type-text {
  line-height: 1.6;
  color: #555;
  margin: 0;
  font-size: 1.05rem;
  text-align: left;
}

/* 联系方式样式 */
.contact-content {
  padding: 0 1rem;
}

.contact-text {
  line-height: 1.6;
  color: #555;
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
  text-align: left;
}

.contact-text:last-child {
  margin-bottom: 0;
}

/* 地址内容样式 */
.address-content {
  padding: 0 1rem;
}

.address-text {
  line-height: 1.6;
  color: #555;
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
  text-align: left;
}

.address-text:last-child {
  margin-bottom: 0;
}

/* 汇款方式样式 */
.payment-content {
  padding: 0 1rem;
}

.payment-text {
  line-height: 1.6;
  color: #555;
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
  text-align: left;
}

.payment-note {
  background-color: #fff3cd;
  padding: 1rem;
  border-radius: 4px;
  border-left: 4px solid #ffc107;
  margin-top: 1rem;
  font-style: italic;
  text-align: left;
}

/* 分隔线样式 */
.custom-double-divider {
  display: flex;
  width: 100%;
  margin-bottom: 20px;
}

.title-divider {
  position: relative;
  border: none;
  margin: 0;
  height: 1px;
}

/* 左侧 20% 的分隔线（绿色） */
.title-divider::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20%;
  height: 4px;
  background: #13675b;
}

/* 右侧 80% 的分隔线（灰色） */
.title-divider::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 80%;
  height: 1px;
  background: #e5e7eb;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .custom-card {
    padding: 1.5rem;
  }

  .contact-title {
    font-size: 1.8rem;
  }

  .section-title {
    font-size: 1.3rem;
  }

  .content-paragraph,
  .service-item,
  .reference-text,
  .process-text,
  .type-text,
  .contact-text,
  .address-text,
  .payment-text {
    font-size: 1rem;
    text-indent: 1.5em;
  }

  .service-list {
    padding-left: 1.5em;
  }

  .process-content {
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .contact-title {
    font-size: 1.5rem;
  }

  .section-title {
    font-size: 1.2rem;
  }

  .content-paragraph,
  .service-item,
  .reference-text,
  .process-text,
  .type-text,
  .contact-text,
  .address-text,
  .payment-text {
    font-size: 0.9rem;
    text-indent: 1em;
  }

  .service-list {
    padding-left: 1em;
  }
}
</style>